<template>
    <div class="mv" >
        <!-- MV播放 -->
        <video controls :src="this.MvUrl.url"></video>
        <!-- 返回主页 -->
        <router-link to="/">
            <div class="back-icon">
                <img src="../assets/back.svg">
        </div>
        </router-link>
        <!-- MV详情 -->
        <div class="mv-info">
            <p class="name">{{this.MvData.artistName}}: {{this.MvData.name}}</p>
            <p class="pl-count">{{this.MvData.playCount|formatNumber}}次观看</p>
            <p class="pl-time">{{this.MvData.publishTime}} 发布</p>
        </div>
        <!-- 点赞收藏评论分享 -->
        <div class="mv-tabbar">
            <!-- 点赞 -->
            <div class="mv-like">
                <i class="like-icon"><img src="../assets/mvicon/like.svg"></i>
                <span>{{this.MvData.shareCount}}</span>
            </div>
            <!-- 收藏 -->
            <div class="mv-sub">
                <i class="sub-icon"><img src="../assets/mvicon/sub.svg"></i>
                <span>{{this.MvData.subCount}}</span>
            </div>
            <!-- 评论 -->
            <div class="mv-comment">
                <i class="comment-icon"><img src="../assets/mvicon/comment.svg"></i>
                <span>{{this.MvData.commentCount}}</span>
            </div>
            <!-- 分享 -->
            <div class="mv-share">
                <i class="share-icon"><img src="../assets/mvicon/share.svg"></i>
                <span>{{this.MvData.shareCount}}</span>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="line"></div>
        <!-- 相关视频 -->
        <h2 class="title">相关视频</h2>
        <router-link :to="`/mv/${list.id}`" v-for="list in MvRelatedMv" :key="list.id">
            <related-mv :item="list" v-if="MvRelatedMv.length>0"></related-mv>
        </router-link>
            
        
        
        <!-- 分割线 -->
        <div class="line"></div>
        <!-- 热门评论 -->
        <h2 class="title">热门评论</h2>
        <comment-list :item="MvHotComments" v-if="MvHotComments.length>0"></comment-list>
        <!-- 分割线 -->
        <div class="line"></div>
        <!-- 最新评论 -->
        <h2 class="title">最新评论</h2>
        <comment-list :item="MvComments" v-if="MvComments.length>0"></comment-list>
        <!-- 分割线 -->
        <div class="line"></div>

        <router-view></router-view>
    </div>
</template>

<script>
import CommentList from "@/components/CommentList.vue"
import RelatedMv from "@/components/RelatedMv.vue"


export default {
    props:[
        "mid"
    ],
    data(){
        return{
            MvData:[],
            MvUrl:[],
            MvComments:[],
            MvHotComments:[],
            MvRelatedMv:[],
        }
    },
    created(){
        this.getMvData()
        this.getMvUrl()
        this.getMvComments()
        this.getMvRelatedMv()
    },
    methods:{
        async getMvData(){
            let res=await this.axios.get("/mv/detail?mvid="+this.mid)
            // console.log(res)
            this.MvData=res
        },
        async getMvUrl(){
            let res=await this.axios.get("/mv/url?id="+this.mid+"&r=1080")
            // console.log(res)
            this.MvUrl=res
        },
        async getMvComments(){
            let res=await this.axios.get("/comment/mv?id="+this.mid)
            // console.log(res)
            this.MvComments=res.comments
            this.MvHotComments=res.hotComments
        },
        async getMvRelatedMv(){
            let res=await this.axios.get("/simi/mv?mvid="+this.mid)
            // console.log(res)
            this.MvRelatedMv=res.mvs
        }
    },
    filters: {
        formatNumber(value) {
        if (value / 10000 >= 10000) {
            return (value / 100000000).toFixed(1) + "亿";
        } else if (value / 10000 > 0) {
            return (value / 10000).toFixed(1) + "万";
        } else {
            return value;
        }
        },
    },
    components:{
        CommentList,
        RelatedMv,
    }
}
</script>

<style lang="less" scoped>
.mv{
    position: sticky;
    top: 0px;
    left: 0px;
    width: 100%;
    margin-bottom: 60px;
    .back-icon{
        position: absolute;
        top: 15px;
        left: 5px;
        width: 30px;
        height: 30px;
        &>img{
            width: 30px;
        }
    }
    video{
        position: relative;
        width: 100%;
    }
    .mv-info{
        margin: 15px 10px;
        color: #818181;
        .name{
            font-size: 18px;
            line-height: 18px;
            font-weight: 700;
            color: black;
        }
        .pl-count,.pl-time{
            margin-top: 15px;
            font-size: 13px;
            line-height: 13px;
        }
    }
    .mv-tabbar{
        display: flex;
        justify-content: space-around;
        padding: 20px 0px;
        position: relative;
        &>div{
            display: flex;
            flex-direction: column;
            font-size: 12px;
            line-height: 12px;
            color: #818181;
            align-items: center;
        }
    }
    .title{
        // width: 100%;
        height: 30px;
        // line-height: 30px;
        vertical-align: middle;
        font-weight: 700;
        margin: 10px 0px;
        font-size: 18px;
        position: relative;
        padding: 0px 10px;
        &::after{
            content: "";
            width: 100%;
            height: 1px;
            background: #ececec;
            position: absolute;
            bottom: -5px;
            left: 0px;
        }
    }
    .line{
        width: 100%;
        height: 5px;
        background: #ececec;
    }
}
</style>